<template>
  <div class="form__wrapper">
    <base-form
      ref="form"
      :label-width="'110px'"
      column="single"
      :form-list="formList"
      :form-rules="formRules"
      :form-disabled="submitLoading || formDisabled"/>
    <div class="actions">
      <el-button type="primary" size="small" @click="submit" :loading="submitLoading">提交</el-button>
      <el-button type="default" size="small" @click="cancel" :disabled="submitLoading">取消</el-button>
    </div>
  </div>
</template>

<script>
import BaseForm from '@/components/BaseForm'

import { dict_productionApi } from '@/api/modules/dictionary'
import { detailApi, editApi } from '@/api/modules/device/productionRecords'

export default {
  name: 'ProductionRecordsEdit',
  components: { BaseForm },
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      roleOptions: [],
      inspectionAgencyOptions: [],

      formList: [
        { label: '设备主控ID', prop: 'deviceMasterControlIds', type: 'textarea', placeholder: '主控ID间请用 , 分隔' },
        { label: '所属产品', prop: 'productionId', type: 'select', options: [] },
      ],

      formRules: {
        deviceMasterControlIds: [
          { required: true, message: '设备主控ID不能为空', trigger: ['blur', 'change'] },
          // TODO:主控ID应该会有具体格式，需要使用正则判断
          // { pattern: /^([\d\w]*)|([\d\w]*[,\s][\d\w]*)$/, message: '格式不正确', trigger: ['blur', 'change'] },
        ],
        productionId: [
          { required: true, message: '所属产品不能为空', trigger: ['blur', 'change'], type: 'number' },
        ]
      },

      formDisabled: true,
      submitLoading: false
    }
  },
  methods: {
    async getProductionOptions () {
      try {
        const { data } = await dict_productionApi()

        if((data ?? '') !== '') {
          this.$refs['form'].setOptions({
            prop: 'productionId',
            options: data.map(({ id, name }) => ({ label: name, value: id }))
          })
        }

      } catch (err) {}
    },
    async getDetail () {
      try {
        this.formDisabled = true

        const params = { id: this.id }
        const { data } = await detailApi(params)

        this.$refs['form'].initForm()
        this.$refs['form'].setFormData(data)

        this.formDisabled = false
        
      } catch (err) {
        console.error(err)
      }


    },
    submit () {
      
      this.$refs['form'].validate(async valid => {
        if(valid) {
          try {
            this.formDisabled = true
            this.submitLoading = true
            const params = this.$refs['form'].getFormData()
            await editApi(params)
            this.$message({ type: 'success', message: '修改成功' })
            this.$emit('success')
          } catch (err) {
            console.error(err)
          }
          this.formDisabled = false
          this.submitLoading = false
        }
      })
    },
    cancel () {
      this.$emit('close')
    }
  },
  mounted () {
    this.getProductionOptions()
    this.getDetail()
  }
}
</script>

<style lang="less" scoped>
@import '../../../styles/form.less';
</style>